<template>
  <div class="consumerYhList">
    <div class="welcome" v-if="showLoading">欢迎进入中国账号管理平台</div>
    <div class="shopList" v-else style="padding:0 80px 0 80px">
      <div class="chinaTitle">中国账号SAAS管理平台</div>
      <div class="disFlex Flex-middle search shadow">
        <Form
          :model="formItem"
          :label-width="120"
          style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
          class="searchForm"
        >
          <FormItem label="省份/市">
            <Input v-model="formItem.keyword" placeholder="请输入省/市" style="width:150px"></Input>
          </FormItem>
          <FormItem label="平台状态">
            <Select v-model="formItem.saasStatus" style="width:150px">
              <Option value>全部</Option>
              <Option value="0">禁用</Option>
              <Option value="1">启用</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="searchData">搜索</Button>
          </FormItem>
        </Form>
      </div>
      <TableList
        :columns="columns"
        :data="data"
        :page="page"
        :total="pageTotal*pageNum"
        :pageNum="pageNum"
        newOne="创建新平台"
        @newOneFn="newOne"
        @changePage="changePage"
      ></TableList>
    </div>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import {
  CompanyList,
  CompanyBalanceLog,
  CompanyAudit
} from "api/recuit/bussiness";
import {Login} from "api/recuit/login";
import { SaasList, SaasStatus } from "api/recuit/user";

export default {
  name: "",
  data() {
    return {
      formItem: {
        keyword: "",
        saasStatus: ""
      },
      stateArr: ["禁用", "启用"],
      showLoading: true,
      columns: [
        {
          title: "编号",
          key: "saas_id"
        },
        {
          title: "所在省份",
          key: "province"
        },
        {
          title: "所在城市",
          key: "city"
        },
        {
          title: "公司名称",
          key: "company_name"
        },
        {
          title: "小程序名称",
          key: "name"
        },
        {
          title: "小程序版本",
          key: "version_no"
        },
        {
          title: "管理账号名",
          key: "username"
        },
        {
          title: "创建时间",
          key: "time_create"
        },
        {
          title: "状态",
          key: "saas_status",
          render: (h, params) => {
            return h("div", [this.stateArr[params.row.saas_status]]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 250,
          align: "center",
          render: (h, params) => {
            if (params.row.saas_status == 1) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editData(params.row.saas_id);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row.saas_id, 0);
                      }
                    }
                  },
                  "禁用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.toCharge(params.row.saas_id);
                      }
                    }
                  },
                  "进入后台"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editData(params.row.saas_id);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.changeStatus(params.row.saas_id, 1);
                      }
                    }
                  },
                  "启用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "middle"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.toCharge(params.row.saas_id);
                      }
                    }
                  },
                  "进入后台"
                )
              ]);
            }
          }
        }
      ],

      data: [],
      detailData: [],
      page: 0,
      pageNum: 8,
      companySum: 0, //企业总数
      pageTotal: 0 //页面总数
    };
  },
  components: {
    TableList
  },

  mounted() {
    setTimeout(() => {
      this.showLoading = false;
    }, 3000);
    this.getData();
  },

  methods: {
    //切换页面
    changePage(data) {
      let { page } = data;
      this.page = --page;
      this.getData();
    },
    //新建企业
    newOne() {
      this.$router.push({ name: "consumerYh" });
    },
    //查询条件
    searchData() {
      this.page = 0;
      this.getData();
    },
    //启用和禁用操作
    changeStatus(saasId, saasStatus) {
      SaasStatus({ saasId, saasStatus })
        .then(result => {
          this.$Message.success("操作成功");
          let data = this.data;
          for (let i = 0; i < data.length; i++) {
            if (saasId == data[i].saas_id) {
              data[i].saas_status = saasStatus;
            }
          }
          this.data = data;
        })
        .catch(err => {
          this.$Message.success("操作错误");
        });
    },
    //获取商户列表
    getData() {
      let page = this.page;
      let pageNum = this.pageNum;
      let formItem = this.formItem;
      let dataList = new Object();
      this.data = [];
      console.log(page, "page");
      dataList.page = ++page;
      dataList.pageNum = pageNum;
      //获取查询条件
      for (let i in formItem) {
        dataList[i] = formItem[i];
      }

      SaasList(dataList).then(res => {
        let { saasData, page } = res;
        this.data = saasData;
        // this.companySum = companySum;
        this.pageTotal = page.pageTotal;
        this.page = Number(page.page)
      });
    },
    editData(saas_id) {
      this.$router.push({ name: "consumerYh", params: { saas_id } });
    },
    //进入平台后台
    toCharge(saasid){
      let formItem = {
        username:'superAccount',
        password:'banchengdlzr514',
        saasid
      }
      Login(formItem).then(_res => {
          this.$Message.success("登陆成功");
          setTimeout(() => {
              this.$router.replace("/");
          }, 1500);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    }
  }
};
</script>

<style>
/*表头标题*/
.table-header-title {
  height: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

/*表头提示图标*/
.table-header-icon {
  font-size: 20px;
  margin-left: 10px;
}

/*弹窗标题*/
.alert-title {
  margin-top: 10px;
}

/*搜索*/
.search {
  /* padding: 18px; */
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 24px;
}

/*搜索下拉*/
.search-select {
  min-width: 128px;
  width: 128px;
  margin-right: 15px;
}

/*搜索输入框*/
.search-input {
  margin-right: 15px;
  top: 0;
}

.search-button {
  /* width: 80px;
    min-width: 80px; */
  margin-left: 15px;
}
.timeSpan {
  margin: 0 15px;
}
.detailTable::-webkit-scrollbar {
  width: 15px;
}
.detailTable tr {
  width: 700px;
}
.card {
  margin-bottom: -16px;
}

.consumerYhList {
  width: 100%;
  height: 100vh;
  background: rgb(240, 242, 245);
}
.welcome {
  font-size: 32px;
  font-weight: bold;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: myfirst 3s;
}
.chinaTitle {
  font-size: 28px;
  padding: 30px 0;
  font-weight: bold;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes myfirst {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.1;
  }
  10% {
    opacity: 0.2;
  }
  15% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.4;
  }
  25% {
    opacity: 0.5;
  }
  30% {
    opacity: 0.6;
  }
  35% {
    opacity: 0.7;
  }
  40% {
    opacity: 0.8;
  }
  45% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  85% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.4;
  }
  95% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
</style>
